<template>
  <div class="tabs">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag, index)"
      size="small"
      >{{ tag.label }}</el-tag
    >
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CommonTag',
  data() {
    return {}
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabsList
    })
  },
  methods: {
    ...mapMutations({
      //这里取个别名close 下面调用close的时候就是调用vuex下mutations的closeTag
      close: 'closeTag'
    }),
    changeMenu(item) {
      this.$router.push(item.path)
    },
    //这里传入进来的index是当前焦点tag的index
    handleClose(tag, index) {
      
      const lastIndex = this.tags.length - 1
      this.close(tag)
      //判断如果删除的那个tag不是焦点的tag,就不需要去改变当前聚焦的tag
      if (tag.name !== this.$route.name) {
        return;
      }
      //对index和lastIndex进行比较,如果相等,就证明我们点击的tag就是tag列表中的最后一个
      if (lastIndex === index) {
        this.$router.push(this.tags[index - 1].path)
      } else {
        this.$router.push(this.tags[index].path)
      }
    },
    
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
}
</script>
<style lang="less" scoped>
.tabs {
  padding: 20px;
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
